<template>
  <div class="taocashgift">
    <div class="taocashgift_main">
      <!-- 头部档次 -->
      <div class="tao_header">
        <div class="header_main">
          <div @click="goindex" style="cursor: pointer;"><logo></logo></div>
          <p>/ 淘礼金</p>
        </div>
      </div>
      <div class="header_cash">
        <div class="cash_main">
          <el-radio-group v-model="cashradio" @change="cashchange">
            <el-radio-button
              v-for="(item, index) in cashList"
              :key="index"
              :label="item.id"
              >{{
                typeof item.id == "number"
                  ? parseInt(item.price) + "元档"
                  : item.price
              }}</el-radio-button
            >
          </el-radio-group>
        </div>
      </div>
      <!-- banner主图 -->
      <div class="banner">
        <el-image
          style="width: 100%; height: 100%"
          :src="require('@/assets/images/bg_banner.jpg')"
          fit="none"
        ></el-image>
      </div>
      <!-- 领取礼金盒子 -->
      <div class="container">
        <el-card :body-style="{ padding: '10px' }">
          <div class="container_main">
            <el-card
              :body-style="{ padding: '0px' }"
              style=" border-radius: 8px; overflow: hidden;margin-right:10px"
            >
              <div>
                <div class="cashcard">
                  <div class="cash_btn">
                    <el-button type="primary" size="mini">查看产品</el-button
                    ><el-button type="primary" size="mini">复制链接</el-button>
                  </div>
                </div>
                <a
                  href="#"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="cash_a"
                >
                  礼金券领取链接
                </a>
              </div>
            </el-card>
            <el-card
              :body-style="{ padding: '0px' }"
              style=" border-radius: 8px; overflow: hidden;"
            >
              <div>
                <div class="cashcard cash2">
                  <div class="cash_btn">
                    <el-button type="primary" size="mini">查看产品</el-button
                    ><el-button type="primary" size="mini">复制链接</el-button>
                  </div>
                </div>
                <a
                  href="#"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="cash_a"
                >
                  礼金券领取链接
                </a>
              </div>
            </el-card>
          </div>
        </el-card>
        <div class="banner2">
          <el-image
            style="width: 100%; height: 100%"
            :src="require('@/assets/images/bg_banner2.jpg')"
            fit="none"
          ></el-image>
        </div>
      </div>
      <!-- 筛选/搜索盒子 -->
      <div class="search">
        <div class="search_main">
          <div class="search_box">
            <el-input
              v-model="searchipt"
              placeholder="请输入内容"
              clearable
              style=" width: 768px;"
            ></el-input>
            <el-button type="primary" @click="dosearch">
              <span style="padding: 12px 20px;">搜 索</span>
            </el-button>
          </div>
          <el-divider></el-divider>
          <div>
            <el-radio-group v-model="sort" @change="sortchange">
              <el-radio-button label="1">日销量排行</el-radio-button>
              <el-radio-button label="2">上架时间排行</el-radio-button>
              <el-radio-button label="3">价格排行</el-radio-button>
              <el-radio-button label="4">月销量排行</el-radio-button>
              <el-radio-button label="5">佣金比例排行</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      <!-- 商品列表 -->
      <div class="goods_list">
        <div class="goods_main">
          <div class="goods_Box">
            <div class="goods_bot">
              <el-row :gutter="24">
                <el-col
                  :span="12"
                  class="hover_box2"
                  v-for="(item, index) in goodsList"
                  :key="index"
                >
                  <!-- top标签 -->
                  <!-- <div class="position_Box">
                      <img
                        class="topimg2"
                        :src="require('@/assets/images/top_big.png')"
                        alt=""
                      />
                      <div class="top_num2">{{ index + 3 }}</div>
                    </div> -->
                  <el-card shadow="always" :body-style="{ padding: '0px' }">
                    <div class="top_main2">
                      <div
                        class="demo-image__lazy"
                        style="cursor: pointer;width:220px;height:220px"
                      >
                        <el-image
                          class="elimg2"
                          style="width:220px;height:220px"
                          fit
                          :src="item.goods_pic"
                          lazy
                        >
                          <div slot="placeholder" class="image-slot">
                            <Goodsloading></Goodsloading>
                          </div>
                        </el-image>
                      </div>
                      <div class="top_right2">
                        <div class="top_roll2">
                          今日销量<span>{{ item.today_num }}</span>
                        </div>
                        <div class="top_title2">
                          {{ item.goods_title }}
                        </div>
                        <div class="top_data2">
                          <div>
                            <p>{{ item.goods_after_price }}</p>
                            <p>折扣价</p>
                          </div>
                          <div>
                            <p>{{ item.commission_bl }}%</p>
                            <p>佣金比例</p>
                          </div>
                          <div>
                            <p>
                              {{
                                (
                                  item.price *
                                  (item.commission_bl / 100)
                                ).toFixed(2)
                              }}
                            </p>
                            <p>佣金</p>
                          </div>
                        </div>
                        <div class="coupon_Box">
                          <div class="coupon_img">
                            <span>对应档次:</span>
                            <span class="cashgrade">{{
                              parseInt(item.cash_grade)
                            }}</span>
                          </div>
                          <div style="background-color: #414141;color:white">
                            月销量:<span style="color:red">{{
                              item.goods_day_num
                            }}</span>
                          </div>
                        </div>
                        <el-progress
                          v-if="progressshow"
                          style="width:200px;margin: 0 auto;"
                          :percentage="
                            parseInt(
                              (item.coupon_lq_num / item.coupon_all_num == 0
                                ? 1
                                : item.coupon_all_num) * 100
                            )
                          "
                        ></el-progress>
                      </div>
                      <div class="shops_Box2">
                        <div class="shops_action2">
                          <div class="action_box2">
                            <div class="join_collect2">
                              <el-button
                                v-show="!item.joined"
                                class="join_btn12"
                                type="primary"
                                @click="addCollect(item, index)"
                              >
                                <span class="iconimg12"></span>
                                <span>
                                  加入集合
                                </span>
                              </el-button>
                              <el-button
                                v-show="item.joined"
                                class="join_btn12"
                                type="primary"
                                @click="delCollect(item, index)"
                              >
                                <span
                                  class="iconimg12"
                                  style="background-position: 18px -1px;"
                                ></span>
                                <span>
                                  移出集合
                                </span>
                              </el-button>
                            </div>
                            <div class="copy2">
                              <el-button
                                class="join_btn22"
                                type="primary"
                                @mousedown.native="handleOk2('goodsli' + index)"
                                @click="handleOk('goodsli' + index)"
                              >
                                <span class="iconimg22"></span>
                                <span>
                                  复制文案
                                </span>
                              </el-button>
                            </div>
                            <div class="position_hover" :id="'goodsli' + index">
                              <div>
                                【预估:{{ item.goods_after_price }}】{{
                                  item.goods_title
                                }}
                              </div>
                              <div>领卷:{{ item.coupon_url }}</div>
                              <div>抢购:{{ item.goods_url }}</div>
                            </div>
                          </div>
                        </div>
                        <!-- <div class="shops_info22">
                          <el-row :gutter="20">
                            <el-col :span="20"
                              ><div class="disflex">
                                <span class="childone">优惠卷剩余:</span>
                                <div class="childtwo">
                                  <span style="color:red">{{
                                    item.coupon_collar_count
                                  }}</span
                                  >/{{ item.coupon_num }}
                                </div>
                              </div>
                            </el-col>
                            <el-col :span="20"
                              ><div class="disflex">
                                <span class="childone">店铺:</span>
                                <span class="childtwo">{{
                                  item.shop_name
                                }}</span>
                              </div>
                            </el-col>
                            <el-col :span="20"
                              ><div class="disflex">
                                <span class="childone">放单人:</span>
                                <span class="childtwo">{{
                                  item.nickname
                                }}</span>
                              </div>
                            </el-col>
                          </el-row>
                        </div> -->
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <!-- 分页器 -->
              <!-- @size-change="handleSizeChange" -->
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                background
                :page-size="100"
                :pager-count="11"
                layout="total, prev, pager, next, jumper"
                :total="count"
              >
                <!-- :page-sizes="[100, 200, 300, 400]" -->
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部盒子 -->
      <div class="footer">
        <footerbox></footerbox>
      </div>
    </div>
    <!-- 侧边栏 -->
    <div class="sider">
      <div class="sidebar">
        <div class="siderbar_box">
          <div class="siderbar_item i1" @click="gobacktop">
            <div class="rool r1"></div>
          </div>
          <div class="siderbar_item i2" @click="shareshow = !shareshow">
            <div class="rool r2"></div>
            <div class="text t2">分享本站</div>
          </div>
          <div class="siderbar_item i3" @click="tgshow = !tgshow">
            <el-badge
              v-if="collectList.length > 0"
              :value="collectList.length"
              class="item"
            >
              <div class="rool r3"></div>
            </el-badge>
            <div v-else class="rool r3"></div>
            <div class="text t3">集合推广</div>
          </div>
          <div class="siderbar_item i4" @click="cashshow = !cashshow">
            <div class="rool r4"></div>
            <div class="text t1">礼金计算</div>
          </div>
        </div>

        <!-- <transition name="slide-fade"> </transition> -->
      </div>
      <!-- 分享本站 -->
      <el-dialog
        title=""
        :visible.sync="shareshow"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <el-input
            type="textarea"
            :autosize="{ minRows: 7, maxRows: 12 }"
            placeholder="请输入内容"
            v-model="shareinfo"
          >
          </el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <div style="width:100%;text-align:center">
            <el-button
              v-clipboard:copy="shareinfo"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              >复 制</el-button
            >
          </div>

          <!-- <el-button type="primary" @click="shareshow = false">确 定</el-button> -->
        </span>
      </el-dialog>
      <!-- 集合推广 -->
      <el-dialog
        :title="'文案(' + collectList.length + ')个'"
        :visible.sync="tgshow"
        width="30%"
        :before-close="handleClose"
      >
        <div class="collect_box" id="collectbox">
          <div v-if="collectList.length > 0">
            <div v-for="(item, index) in collectList" :key="index">
              <div class="collect_top">
                <div>{{ index + 1 }}</div>
                <i class="el-icon-close" @click="closethis(item)"></i>
              </div>
              <div class="collect_main">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 10 }"
                  placeholder="请输入内容"
                  v-model="item.info"
                >
                </el-input>
              </div>
            </div>
          </div>
          <div v-else>
            还没有加入的文案哦 (。・・)ノ
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="text" @click="doclear">清 空</el-button>
          <el-button type="text" @click="docopy">复 制</el-button>
        </span>
      </el-dialog>
      <!-- 礼金计算 -->
      <el-dialog
        title="淘礼金佣金计算器"
        :visible.sync="cashshow"
        width="600px"
        :before-close="handleClose"
      >
        <div class="counter_box">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="counter_col">
                <p>卷后价</p>
                <el-input
                  v-model.number="afterprice"
                  placeholder="请输入卷后价"
                >
                  <span slot="suffix" style="line-height:40px">元</span>
                </el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="counter_col">
                <p>首单礼金</p>
                <el-input
                  v-model.number="firstorder"
                  placeholder="请输入首单礼金"
                >
                  <span slot="suffix" style="line-height:40px">元</span>
                </el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="counter_col">
                <p>佣金比例</p>
                <el-input
                  v-model.number="commratio"
                  placeholder="请输入佣金比例"
                >
                  <span slot="suffix" style="line-height:40px">%</span>
                </el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="counter_col">
                <p>淘礼金面额</p>
                <el-input
                  v-model.number="cashprice"
                  placeholder="请输入淘礼金面额"
                >
                  <span slot="suffix" style="line-height:40px">元</span>
                </el-input>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="counter_col">
                <p>订单数(礼金总数)</p>
                <el-input v-model.number="ordernum" placeholder="请输入订单数">
                  <span slot="suffix" style="line-height:40px">个</span>
                </el-input>
              </div>
            </el-col>
          </el-row>
          <div class="result_box">
            <div class="result_left">
              <p class="res_p" style="margin-top:15px">
                单笔买家实付:
                <span style="color:red"
                  >{{ afterprice - firstorder - cashprice }}元</span
                >
              </p>
              <p class="res_p">
                单笔到手佣金:
                <span style="color:red"
                  >{{ afterprice * (commratio / 100) * 0.9 }}元</span
                >
              </p>
              <p class="res_p">
                单笔订单所得:
                <span style="color:red"
                  >{{
                    afterprice * (commratio / 100) * 0.9 - cashprice
                  }}元</span
                >
              </p>
              <p class="res_p">
                总到手佣金:
                <span style="color:red"
                  >{{ afterprice * (commratio / 100) * 0.9 * ordernum }}元</span
                >
              </p>
              <p class="res_p">
                总支出礼金:
                <span style="color:red">{{ cashprice * ordernum }}元</span>
              </p>
              <p class="res_p">
                总订单所得:
                <span style="color:red"
                  >{{
                    (afterprice * (commratio / 100) * 0.9 - cashprice) *
                      ordernum
                  }}元</span
                >
              </p>
            </div>
            <div class="result_right">
              <input
                type="button"
                value="计算所得"
                class="btn"
                @click="docounter"
                ref="btn"
              />
              <!-- <div class="btn" style="width:100px"></div> -->
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cashshow = false">取 消</el-button>
          <el-button type="primary" @click="cashshow = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <botloading></botloading>
  </div>
</template>

<script>
import Vue from "vue";
import Goodsloading from "@/components/Goodsloading.vue";

import { getCashGrade, getCashGoodsList } from "@/api/taogifts/taogifts";
import botloading from "@/components/botloading.vue";
import logo from "@/components/logo.vue";
import footerbox from "@/components/footerbox.vue";
export default {
  name: "taocashgift",
  components: {
    botloading,
    logo,
    footerbox,
    Goodsloading
  },
  data() {
    return {
      afterprice: "", //卷后价
      firstorder: "", //首单礼金
      commratio: "", //佣金比例
      cashprice: "", //淘礼金面额
      ordernum: "", //订单数
      collectinfo: "",
      joined: true,
      cashshow: false,
      tgshow: false,
      shareinfo:
        "卧槽！这个网站有点牛逼啊\n原来首单礼金漏洞都在这出来的\n佣金全部是自己拿的那种\n你来看看是不是这个\n https://.com",
      shareshow: false,
      collectList: [
        // {
        //   info: "1"
        // }
      ],
      collect: false,
      progressshow: false,
      searchipt: "",
      currentPage: 1,
      count: 0,
      sort: "",
      cashradio: 2,
      cashList: [],
      goodsList: [
        // {
        //   cash_grade: "10.00",
        //   commission_bl: "10",
        //   coupon_all_num: 0,
        //   coupon_lq_num: 0,
        //   goods_after_price: "0.00",
        //   goods_id: "615356497213",
        //   goods_pic:
        //     "http://img.letuilm.com/2020/06/1d9b042020061914162858107.jpeg",
        //   goods_title:
        //     "【医用口罩】一次性使用儿童口罩防尘透气成人口罩加厚三层熔喷布",
        //   month_num: 0,
        //   price: "29.00",
        //   shop_name: "金香旗舰店",
        //   shop_type: 1,
        //   today_num: 0
        // }
      ]
    };
  },

  computed: {},
  created() {
    this.getCashGrade();
    this.getCashGoodsList(1, 80);
  },
  mounted() {},
  methods: {
    docounter() {
      var buttons = this.$refs.btn;
      buttons.addEventListener("click", function(e) {
        var ev = e || window.event; //获取点击事件
        var parent = ev.target; //获取按钮的dom节点
        var count = 1; // 计时
        var sI = setInterval(function() {
          // 循环结束，清除背景
          if (count > 100) {
            parent.style.backgroundImage = "";
            parent.style.backgroundPosition = "";
            parent.style.backgroundSize = "";
            clearInterval(sI);
            return;
          }
          // 设置背景的大小变化
          parent.style.backgroundSize = 2 * count + "%";
          // 设置背景位置根据背景大小改变
          parent.style.backgroundPosition =
            ev.clientX -
            parent.offsetLeft -
            (count * parent.offsetWidth) / 100 +
            "px " +
            (ev.clientY -
              parent.offsetTop -
              (count * parent.offsetWidth) / 100) +
            "px";

          count += 1;
        }, 10); // 设置间隔时间为10ms
      });
    },
    doclear() {
      this.collectList = [];
      var arr = this.goodsList;
      for (var i = 0; i < arr.length; i++) {
        arr[i].joined = false;
        Vue.set(this.goodsList, i, arr[i]);
      }
    },
    delCollect(item) {
      console.log("移除", item);
      var arr = this.goodsList;
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].goods_id == item.goods_id) {
          arr[i].joined = false;
          Vue.set(this.goodsList, i, arr[i]);
        }
      }
      for (let j = 0; j < this.collectList.length; j++) {
        console.log(j);
        if (this.collectList[j].id == item.goods_id) {
          this.collectList.splice(j, 1);
          console.log(this.collectList);
        }
      }
    },
    addCollect(item) {
      console.log("加入", item);
      var arr = this.goodsList;
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].goods_id == item.goods_id) {
          arr[i].joined = true;
          Vue.set(this.goodsList, i, arr[i]);
        }
      }
      var str2 =
        "【预估" +
        item.goods_after_price +
        "】" +
        item.goods_title +
        "\n" +
        "领劵:" +
        item.coupon_url +
        "\n" +
        "抢购:" +
        item.goods_url;
      var obj = {
        id: item.goods_id,
        info: str2
      };
      // obj.info = str;
      this.collectList.push(obj);
    },
    docopy() {
      var that = this;
      var str = "";
      for (let i = 0; i < this.collectList.length; i++) {
        str += this.collectList[i].info + "\n";
      }
      console.log(str);
      this.collectinfo = str;
      this.$copyText(this.collectinfo).then(
        function(e) {
          that.$message.success("复制成功!");
          console.log(e);
        },
        function(e) {
          that.$message.error("复制失败!");
          console.log(e);
        }
      );
    },
    closethis(item) {
      console.log(item);
      var arr = this.goodsList;
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].goods_id == item.id) {
          arr[i].joined = false;
          Vue.set(this.goodsList, i, arr[i]);
        }
      }
      for (let j = 0; j < this.collectList.length; j++) {
        console.log(j);
        if (this.collectList[j].id == item.id) {
          this.collectList.splice(j, 1);
          console.log(this.collectList);
        }
      }
    },
    onCopy() {
      this.$message.success("复制成功!");
    },
    onError() {
      this.$message.error("复制失败!");
    },
    handleClose() {
      this.shareshow = false;
      this.shareinfo =
        "卧槽！这个网站有点牛逼啊\n原来首单礼金漏洞都在这出来的\n佣金全部是自己拿的那种\n你来看看是不是这个\n https://.com";
      this.tgshow = false;
      this.cashshow = false;
    },
    //返回顶部
    gobacktop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 80;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 12);
    },
    dosearch() {
      this.getCashGoodsList(1, 80, this.searchipt);
    },
    handleOk2(val) {
      // console.log(val);
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection();
        const range = document.createRange();
        console.log(document.getElementById(val));
        range.selectNode(document.getElementById(val)); //传入dom
        selection.addRange(range);
        document.execCommand("copy");
        // this.$message.success("复制成功");
        selection.removeAllRanges();
      });
    },
    handleOk(val) {
      console.log(val);
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection();
        const range = document.createRange();
        console.log(document.getElementById(val));
        range.selectNode(document.getElementById(val)); //传入dom
        selection.addRange(range);
        document.execCommand("copy");
        this.$message.success("复制成功");
        selection.removeAllRanges();
      });
    },
    goindex() {
      this.$router.push("/optimGoods/siftGoods");
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      //   this.dosearch();
    },
    //获取商品列表
    getCashGoodsList(page, pagesize, search, sort) {
      getCashGoodsList({
        page: page,
        pagesize: pagesize,
        search: search,
        sort: sort
      })
        .then(res => {
          if (res.code == 200) {
            console.log("商品返回", res);
            this.goodsList = res.data.data;
            for (let i = 0; i < this.goodsList.length; i++) {
              this.goodsList[i].joined = false;
            }
            this.count = res.data.count;
            this.progressshow = true;
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取档次
    getCashGrade() {
      getCashGrade()
        .then(res => {
          if (res.code == 200) {
            console.log("档次返回", res);
            this.cashList = res.data;
            // this.cashList.push({
            //   id: "a",
            //   price: "精编区"
            // });
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    cashchange(val) {
      console.log("cashradio", val);
    },
    sortchange(val) {
      console.log("sort", val);
      this.getCashGoodsList(1, 80, this.searchipt, this.sort);
    }
  }
};
</script>

<style lang="less" scoped>
@keyframes landr {
  0% {
    transform: rotate(0deg);
    transform-origin: right bottom 0;
  }
  39% {
    transform: rotate(5deg);
    transform-origin: right bottom 0;
  }
  40% {
    transform: rotate(5deg);
    transform-origin: left bottom 0;
  }
  75% {
    transform: rotate(-10deg);
    transform-origin: left bottom 0;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: left bottom 0;
  }
}
.sider {
  // position: relative;
  .sidebar {
    width: 80px;
    // height: 300px;
    // background-color: gray;
    position: fixed;
    top: 40%;
    right: 0;
    z-index: 100;
    .siderbar_box {
      .siderbar_item {
        position: relative;
        float: right;
        // margin-top: 15px;
        width: 48px;
        height: 48px;
        border-radius: 5px;
        border: 1px #d6d6d6 solid;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        cursor: pointer;
        transition: all 300ms ease;
        .rool {
          background: url("~@/assets/images/rtool.png");
          width: 48px;
          height: 48px;
          // transition: all 300ms ease;
        }
      }
      .i1 {
        top: 0;
        .r1 {
          background-position: 0 -144px;
        }
      }
      .i1:hover {
        background: linear-gradient(#856eff, #5982ff);
        .r1 {
          background-position: 48px -144px;
        }
      }
      .i2 {
        top: 10px;
        .r2 {
          background-position: 0 0;
        }
      }
      .i2:hover {
        width: 120px;
        background: linear-gradient(#856eff, #5982ff);
        .r2 {
          background-position: 48px 0;
        }
      }
      .i3::v-deep {
        top: 20px;
        .item {
          display: block;
          .el-badge__content.is-fixed {
            top: 10px;
            right: 23px;
          }
        }
        .r3 {
          background-position: 0 -48px;
        }
      }
      .i3:hover {
        width: 120px;
        background: linear-gradient(#856eff, #5982ff);
        .r3 {
          background-position: 48px -48px;
        }
      }
      .i4 {
        top: 30px;
        .r4 {
          background-position: 0 -96px;
        }
      }
      .i4:hover {
        width: 120px;
        background: linear-gradient(#856eff, #5982ff);
        .r4 {
          background-position: 48px -96px;
        }
      }
    }
    .text {
      position: absolute;
      line-height: 48px;
      color: #fff;
      font-size: 14px;
      left: 48px;
    }
    .t1 {
      top: 0;
    }
    .t2 {
      top: 0;
    }
    .t3 {
      top: 0;
    }
    .dialogue {
      background-color: #fff;
      position: absolute;
      top: 0;
      right: 140px;
      clear: both;
      width: 200px;
      height: 80px;
      border-radius: 10px;
      // opacity: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      transition: all 200ms ease;
      span {
        display: inline-block;
      }
      .qqimg {
        width: 50px;
        height: 50px;
        background: url("~@/assets/images/qq.png") no-repeat center;
        background-size: 48px 48px;
        // background-position: -3px 7px;
        // border-radius: 50%;
      }
      .triangle {
        position: absolute;
        width: 12px;
        height: 10px;
        transform: rotateZ(45deg);
        background-color: #fff;
        top: 17px;
        right: -6px;
      }
    }
    .collect::v-deep {
      background-color: #fff;
      position: absolute;
      top: -150px;
      right: 140px;
      clear: both;
      width: 400px;
      height: 600px;
      border-radius: 10px;
      // opacity: 0;
      box-shadow: 0 0 10px #eee;
      transition: 0.3s;
      box-sizing: border-box;
      transition: all 200ms ease;
      .tabs {
        width: 100%;
        margin-top: 20px;
        .el-radio-group {
          overflow: hidden;
          .el-radio-button__inner {
            width: 150px;
            height: 35px;
            line-height: 27px;
            box-sizing: border-box;
            padding: 5px 10px;
            // color: #fff;
            border-radius: 40px;
          }
          .is-active {
            .el-radio-button__inner {
              background: linear-gradient(
                90deg,
                rgba(15, 121, 233, 1),
                rgba(107, 95, 254, 1),
                rgba(87, 148, 255, 1)
              );
              color: #fff;
            }
          }
        }
      }
      .collectbox {
        width: 98%;
        margin: 0 auto;
        .goods_top {
          // width: 980px;
          position: relative;
          display: flex;
          // justify-content: space-between;
          align-items: center;
          .rowBox {
            width: 95%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
            max-height: 530px;
            overflow: hidden;
            overflow-y: visible;
            .hover_box {
              margin-top: 20px;
              position: relative;
              width: 400px;
              // height: 100px;
              border-radius: 15px;
              overflow: hidden;
              .elimg {
                width: 130px;
                height: 130px;
                border-radius: 15px;
                overflow: hidden;
              }
              .top_main {
                // width: 947px;
                overflow: hidden;
                background-color: #fff;
                // height: 220px;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .top_right {
                  padding: 6px;
                  width: 220px;
                  margin: 0 auto;

                  .top_title {
                    // width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin: 3px auto;
                    cursor: pointer;
                    a {
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      font-size: 14px;
                      text-decoration: none;
                    }
                  }

                  .top_data {
                    height: 70px;
                    font-size: 13px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    p {
                      margin-top: 0 !important;
                      margin-bottom: 0 !important;
                    }
                    p:first-child {
                      color: #333;
                      font-size: 16px;
                      font-weight: bold;
                    }
                  }
                  .bot_img {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    .boticon {
                      width: 20px;
                      height: 20px;
                      cursor: pointer;
                      background: url("~@/assets/images/mico.png");
                    }
                    .btn1 {
                      background-position: 0px 80px;
                    }
                    .btn2 {
                      background-position: 0px 60px;
                    }
                    .btn3 {
                      background-position: 0px 40px;
                    }
                    .btn3:hover {
                      background-position: 20px 40px;
                    }
                  }
                }
              }
            }
            // .hover_box:hover {
            // }
          }
        }
      }
    }
  }
}
.collect_box {
  .collect_top {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-icon-close {
      // display: none;
      cursor: pointer;
      z-index: 101;
      position: absolute;
      top: 2px;
      right: 0px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      background: #fff;
      font-weight: 600;
      font-size: 20px;
      font-style: normal;
      color: #5680fe;
      text-align: center;
      border-radius: 15px;
      transition: all linear 0.5s;
    }
    .el-icon-close:hover {
      background: #607bfe;
      color: #fff;
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
    }
  }
  .collect_main::v-deep {
    .el-textarea__inner {
      resize: none;
      padding: 0px;
      border: none;
      letter-spacing: inherit;
      font-size: 16px;
      font-weight: 600;
      font-family: initial;
      border-radius: 0;
      border-bottom: 2px solid rgba(0, 0, 0, 0.87);
    }
    .el-textarea__inner:focus {
      border-bottom: 2px solid #ea0035;
    }
  }
}
.counter_box {
  text-align: left;
  .counter_col::v-deep {
    padding-top: 5px;
    .el-input__inner {
      border: none;
      border-radius: 0;
      border-bottom: 2px solid rgba(0, 0, 0, 0.87);
    }
    .el-input__inner:focus {
      border-bottom: 2px solid #ea0035;
    }
  }
  .result_box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .result_left {
      .res_p {
        margin-top: 5px;
      }
    }
    .result_right {
      .btn {
        width: 200px;
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background-color: #ea0035;
        border: 1px solid #dcdfe6;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        transition: 0.1s;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        color: white;
      }
      .btn:hover {
        background-color: #ec0055;
      }
      .btn:focus {
        background-image: url("~@/assets/images/btn_bg.png");
        background-repeat: no-repeat;
        background-size: 0% 0%;
      }
    }
  }
}
.taocashgift {
  .taocashgift_main {
    .tao_header {
      width: 100%;
      //   background-color: #f6452d;
      .header_main {
        width: 1300px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 30px;
        font-weight: 500;
        // color: #fff;
      }
    }
    .header_cash {
      width: 100%;
      position: sticky;
      position: -webkit-sticky;
      top: 0;
      // background-color: rgba(255, 0, 0, 0.58);
      background-color: hsla(0, 0%, 100%, 0.68);
      backdrop-filter: saturate(120%) blur(20px);
      z-index: 50;
      .cash_main::v-deep {
        width: 1300px;
        margin: 0 auto;
        .el-radio-group {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .el-radio-button {
            width: 100%;
            .el-radio-button__inner {
              width: 100%;
              height: 52px;
              font-size: 20px;
              line-height: 26px;
              font-weight: 600;
              // background-color: rgba(255, 0, 0, 0.58);
              border: none;
              background-color: hsla(0, 0%, 100%, 0.38);
            }
          }
          .is-active {
            // background-color: #0d8cf054;
            background-color: rgba(255, 0, 216, 0.5);
            .el-radio-button__inner {
              // color: #409eff;
            }
          }
        }
      }
    }
    .banner {
      width: 100%;
      height: 600px;
      background: linear-gradient(to right, #010a11, #06121e);
    }
    .container {
      width: 100%;
      .container_main {
        width: 1300px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        .cashcard {
          width: 224px;
          height: 224px;
          background: url("~@/assets/images/mian_cash.jpg") no-repeat center;
          background-size: 100% 100%;
          display: flex;
          justify-content: space-around;
          align-items: flex-end;
          .cash_btn {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
        .cash2 {
          background: url("~@/assets/images/vice_cash.jpg") no-repeat center;
          background-size: 100% 100%;
        }
        .cash_a {
          display: block;
          width: 150px;
          height: 35px;
          line-height: 35px;
          margin: 0 auto;
          background-position: 0 66.66666%;
          background-image: url("~@/assets/images/abg.png");
          background-repeat: no-repeat;
          background-size: 100% 400%;
          padding: 4px 12px;
          font-size: 20px;
          color: white;
        }
      }
    }
    .banner2 {
      width: 100%;
      height: 200px;
      background: linear-gradient(to right, #010a11, #06121e);
    }
    .search {
      width: 100%;
      z-index: 50;
      position: sticky;
      position: -webkit-sticky;
      top: 52px;
      padding: 10px;
      background-color: hsla(0, 0%, 100%, 0.68);
      backdrop-filter: saturate(120%) blur(20px);
      .search_main {
        width: 1300px;
        margin: 20px auto;
        .search_box::v-deep {
          display: flex;
          justify-content: center;
          align-items: flex-start;
          .el-input__inner {
            border-top-right-radius: unset;
            border-bottom-right-radius: unset;
          }
          .el-button {
            border-top-left-radius: unset;
            border-bottom-left-radius: unset;
          }
        }
      }
    }
    .goods_list {
      width: 100%;
      .goods_main {
        width: 1300px;
        margin: 0 auto;
        .goods_Box {
          width: 100%;
          // height: 500px;
          // position: relative;
          margin-top: 20px;
          margin-bottom: 20px;
          .goods_bot {
            position: relative;
            .hover_box2 {
              position: relative;
              width: 243px;
              border-radius: 12px;
              margin-bottom: 20px;
              display: flex;
              display: -webkit-flex;
              flex-direction: row;
              flex-wrap: wrap;
              .topimg2 {
                position: absolute;
                top: -8px;
                left: 20px;
                z-index: 2;
              }
              .top_num2 {
                position: absolute;
                top: 18px;
                left: 43px;
                font-size: 23px;
                color: #ffffff;
                z-index: 3;
              }
              // .elimg2 {
              //   width: 220px;
              //   // height: 220px;
              // }
              .top_main2 {
                background-color: #fff;
                // height: 220px;
                // display: flex;
                // justify-content: space-around;
                // align-items: center;
                .top_right2 {
                  padding-top: 10px;
                  // width: 220px;
                  font-size: 13px;
                  margin: 0 auto;
                  padding-bottom: 20px;
                  .top_title2 {
                    width: 200px;
                    height: 16px;
                    margin: 3px auto;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    padding-top: 8px;
                    padding-bottom: 8px;
                    a {
                      margin-left: 8px;
                      margin-right: 8px;
                      font-size: 14px;
                      text-decoration: none;
                    }
                  }
                  .top_roll2 {
                    padding-top: 8px;
                    padding-bottom: 8px;
                    width: 150px;
                    height: 25px;
                    line-height: 25px;
                    border-radius: 8px;
                    margin: 0 auto;
                    background-color: rgba(148, 144, 144, 0.1);
                    span {
                      font-size: 16px;
                      margin-left: 5px;
                      margin-right: 5px;
                      color: #ff4215;
                      font-weight: bold;
                    }
                  }
                  .top_data2 {
                    height: 70px;
                    font-size: 13px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    p {
                      margin-top: 0 !important;
                      margin-bottom: 0 !important;
                    }
                    p:first-child {
                      color: #333;
                      font-size: 16px;
                      font-weight: bold;
                    }
                  }
                }
              }
              .shops_Box2 {
                // width: 100%;
                .shops_action2 {
                  position: absolute;
                  top: 220px;
                  left: 13px;
                  z-index: -11;
                  opacity: 0;
                  transition: all 1s initial;
                  .action_box2 {
                    width: 217px;
                    display: flex;
                    // justify-content: space-betwe;
                    align-items: center;
                    .join_collect2 {
                      background-color: #fb522b;
                      overflow: hidden;
                      border-top-left-radius: 10px;
                      .join_btn12 {
                        background-color: #fb522b;
                        border: none;
                        margin: 0 auto;
                        .iconimg12 {
                          display: inline-block;
                          width: 17px;
                          height: 15px;
                          overflow: hidden;
                          margin-left: -8px;
                          background: url("~@/assets/images/icon_a.png");
                          background-position: 37px -1px;
                          // object-fit: cover;
                          transform: scale(1);
                          transition: all 0.3s initial;
                        }
                      }
                    }
                    .join_collect2:hover {
                      span {
                        color: #ff9;
                      }
                      .iconimg12 {
                        // transform: translate(1px);
                        // transform: scale(1.3);
                        animation: landr 0.8s ease-in-out;
                      }
                    }
                    .copy2 {
                      background-color: rgb(255, 129, 48);
                      overflow: hidden;
                      border-top-right-radius: 10px;
                      .join_btn22 {
                        background-color: rgb(255, 129, 48);
                        border: none;
                        .iconimg22 {
                          display: inline-block;
                          width: 17px;
                          height: 15px;
                          overflow: hidden;
                          margin-left: -8px;
                          background: url("~@/assets/images/icon_a.png");
                          background-position: 39px -22px;
                          // object-fit: cover;
                          transform: scale(1);
                          // transition: all 0.3s initial;
                        }
                      }
                    }
                    .position_hover {
                      border-radius: 12px;
                      box-sizing: border-box;
                      padding: 10px;
                      color: white;
                      background-color: #00000075;
                      display: none;
                      position: absolute;
                      top: -100px;
                      left: 225px;
                      width: 225px;
                      text-align: left;
                      // word-break: keep-all;
                      // white-space: nowrap;
                      font-size: 12px;
                      opacity: 0;
                      z-index: -999;
                      .elimghover {
                        width: 80px;
                      }
                    }
                    .copy2:hover + .position_hover {
                      display: block;
                      opacity: 1;
                      z-index: 999999;
                    }
                    .copy2:hover {
                      span {
                        color: #ff9;
                      }
                      .iconimg22 {
                        // transform: translateX(1px), translatey(1px);
                        // transform: scale(1.3);
                        animation: landr 0.8s ease-in-out;
                      }
                    }
                  }
                }
                .shops_info22 {
                  position: absolute;
                  top: 370px;
                  left: 12px;
                  width: 217px;
                  height: 70px;
                  font-size: 12px;
                  background-color: #fff;
                  border-bottom-right-radius: 10px;
                  border-bottom-left-radius: 10px;
                  z-index: -1;
                  border-bottom: 1px solid #ebeef5;
                  border-left: 1px solid #ebeef5;
                  border-right: 1px solid #ebeef5;
                  transition: all 1s initial;
                  padding-bottom: 12px;
                  display: flex;
                  align-items: center;
                  div {
                    width: 100%;
                    padding-top: 5px;
                  }
                }
              }
            }
            .hover_box2:hover {
              .shops_Box2 {
                .shops_action2 {
                  transition: all 300ms ease;
                  -moz-transition: all 300ms ease;
                  -webkit-transition: all 300ms ease;
                  top: 180px;
                  opacity: 1;
                  z-index: 6;
                }
                .shops_info22 {
                  transition: all 300ms ease;
                  -moz-transition: all 300ms ease;
                  -webkit-transition: all 300ms ease;
                  top: 449px;
                  opacity: 1;
                  z-index: 5;
                }
              }
            }
          }
          /* 公共样式 */
          // 优惠卷
          .coupon_Box {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 25px;
            line-height: 25px;
            margin-bottom: 10px;
            .coupon_img {
              display: flex;
              justify-content: space-around;
              align-items: center;
              background-color: #ff452d;
              color: #fff;
              padding: 0 5px;
              //   width: 65px;
              height: 27px;
              .cashgrade {
                display: inline-block;
                height: 23px;
                padding: 0px 2px;
                color: #ff452d;
                background-color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
